import React, { Component } from 'react';
import styles from './styles.less'
import { connect } from 'dva'
import { Modal, Form, Input, Row, Col, Button, message, Select } from 'antd'
import headImg from '@/assets/HomeLayout/logo.jpg'

function mapStateToProps({ globalModel, projectModel }) {
    return {
        globalModel: globalModel, //通用全局模块
        projectModel: projectModel
    }
}
@connect(mapStateToProps)
export default class DetailsModel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            formState: true,
            compile: '编辑',
            option: null,
            departmentName: ''
        }
    }


    componentDidMount() {
        this.props.dispatch({
            type: 'projectModel/getDepartment',
            payload: {
                params: {

                },
                callback: (item) => {
                    let arr = []
                    for (let i in item) {
                        let obj = {
                            value: item[i].name,
                            label: item[i].name
                        }
                        arr.push(obj)
                    }
                    this.setState({
                        option: arr
                    })
                }
            }
        })
    }

    compileClick = () => {
        this.setState({
            compile: '取消',
            formState: false
        })
    }

    cancel = () => {
        this.setState({
            compile: '编辑',
            formState: true
        })
    }

    onFinish = (data) => {
        console.log(data, 'data');
        let { formState } = this.state
        if (!formState) {
            this.props.dispatch({
                type: "projectModel/staffMsgUpdate",
                payload: {
                    params: {
                        id: this.props.detailsData.id,
                        name: data.name,
                        departmentName: data.address,
                        phone: data.phone,
                        sex: data.sex === '男' ? 0 : 1,
                        identityCard: data.useNumber
                    },
                    callback: (item) => {
                        if (item.code === 0 && item.msg === 'success') {
                            message.success('修改成功')
                            this.props.onCancel()
                            this.props.getData()
                            this.cancel()
                        }
                    }
                }
            })
        } else {
            this.props.onCancel()
        }
    }


    selectOnChange = (e, data) => {
        console.log(e, data, 'e, data');
        this.setState({
            departmentName: data.label
        })
    }

    componentWillUnmount() {

    }
    render() {
        let { modelOpen, detailsData, functionState } = this.props
        let { compile, formState, option, departmentName } = this.state
        return (
            <Modal
                title="员工详情"
                centered
                onCancel={() => { this.props.onCancel(), this.setState({ compile: '编辑', formState: true }) }}
                open={modelOpen}
                footer={null}
                width={900}
                destroyOnClose={true}
            >
                <div className={styles.title}>
                    <img src={detailsData?.avatar} />
                    <div>{detailsData?.nickName}</div>
                </div>
                <Form
                    name="basic"
                    labelCol={{
                        span: 5,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    onFinish={this.onFinish}
                    initialValues={{
                        name: detailsData?.name,
                        address: detailsData?.departmentName,
                        // useNumber: detailsData?.identityCard,
                        enterpriseName: detailsData?.enterpriseName,
                        phone: detailsData?.phone,
                        // sex: detailsData?.sex === 0 ? '男' : '女',
                        joinTime: detailsData?.joinTime,
                        loginDate: detailsData?.loginDate
                    }}
                >
                    <Row align='middle'>
                        <Col span={12} push={0}>
                            <Form.Item
                                label="姓名"
                                name="name"
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col>
                        <Col span={12} push={0}>
                            <Form.Item
                                label="所属企业"
                                name="enterpriseName"
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col>
                        {/* <Col span={12} push={0}>
                            <Form.Item
                                label="身份证号"
                                name="useNumber"
                                rules={[
                                    { pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/, message: '请输入正确的身份证号码' },
                                ]}
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col> */}
                        <Col span={12} push={0}>
                            <Form.Item
                                label="所属部门"
                                name="address"
                            >
                                <Select
                                    defaultValue=""
                                    style={{
                                        width: 320,
                                    }}
                                    onChange={this.selectOnChange}
                                    options={option}
                                    value={departmentName}
                                    disabled={formState}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12} push={0}>
                            <Form.Item
                                label="手机号"
                                name="phone"
                                rules={[
                                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' },
                                ]}
                                disabled
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col>
                        {/* <Col span={12} push={0}>
                            <Form.Item
                                label="性别"
                                name="sex"
                                disabled
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col> */}
                        <Col span={12} push={0}>
                            <Form.Item
                                label="加入时间"
                                name="joinTime"
                            >
                                <Input disabled={true} placeholder={detailsData?.joinTime} />
                            </Form.Item>
                        </Col>
                        <Col span={12} push={0}>
                            <Form.Item
                                label="上次登录时间"
                                name="loginDate"
                            >
                                <Input disabled={true} placeholder={detailsData?.loginDate} />
                            </Form.Item>
                        </Col>
                    </Row>
                    {
                        functionState &&
                        <div className={styles.functionBtn}>
                            <div className={styles.compile} onClick={compile === '编辑' ? this.compileClick : this.cancel}>{compile}</div>
                            <Button type="primary" htmlType="submit" >
                                确认
                            </Button>
                        </div>
                    }
                </Form>


            </Modal>
        );
    }
}
